<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>
        <div>
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
            irweofnuiwerhfiuwefhweu
        </div>
    </span>
</body>
<script>
    // 行及元素
        // 特性：
        /**
         * 不独占一行：行内元素不会单独占据一整行，而是与其他行内元素、文本内容等一起排列在同一行中。
         * 不打断文本流：它们的宽度与内容相匹配，因此不会引发换行
         * 无法设置宽高：大多数情况下，行内元素无法直接设置宽度和高度（部分浏览器可能允许设置高度，但效果有限）。
         * 内边距和边框影响布局：行内元素的 padding 和 border 会影响文本的排布，但不会改变元素所在行的布局。
         */
        /**
         * <a>：超链接
         * <span>：用于包裹文本，通常用于应用样式
         * <strong>：加粗文本，语义上表示重要性
         * <em>：斜体文本，语义上表示强调
         * <img>：嵌入图片（注意：虽然是行内元素，但 img 可以设置宽高）
         * <input>：输入框
         * <label>：表单标签    
         * <button>：按钮
        */
    
    // 块级元素
        // 特性：
        /**
         * 独占一行：块级元素会独占一行，并且前后元素都会自动换行。因此，块级元素会在页面布局中堆叠排列。
         * 可以包含其他元素：块级元素可以包含其他块级元素或行内元素。这使它们非常适合用作布局的基本结构。
         * 宽度默认填满父容器：块级元素的宽度默认会扩展到与其父容器同宽（即使内容不足以填满整行），但可以通过 CSS 调整宽度。
         * 可设置宽高：块级元素可以通过 CSS 自由设置宽度、高度、内边距（padding）、边框（border）和外边距（margin）
         */

         /**
          * <div>：通用的容器元素，常用于布局和分组其他元素。
          * <p>：段落元素，用于包裹文本段落。
          * <h1> 到 <h6>：标题元素，表示不同级别的标题。
          * <ul> 和 <ol>：无序列表和有序列表，通常用于创建列表结构。
          * <li>：列表项，用于列举项目。
          * <table>：表格元素，用于表示表格结构。
          * <tr>：表格行。
          * <td> 和 <th>：表格单元格和表头单元格。
          * <form>：表单元素，用于包裹用户提交数据的表单。
          * <header>：页眉元素，通常包含导航、标题等内容。
          * <main>：文档的主要内容部分。
          * <footer>：页脚元素，通常包含版权声明、链接等。
          * <section>：文档中的区块，用于逻辑分组内容。
         */
    // 空元素
        // 特性：
        /**
         * 没有结束标签：空元素是自闭合的，没有结束标签。例如：<br> 和 <img>。
         * 没有内容：空元素本身不能包含内容，因此它们不允许嵌套其他元素或文本。
         * 自闭合：在 XHTML 中，空元素必须使用自闭合语法（例如 <img />），但在 HTML5 中，它们可以简单地用 <img> 这样的形式。
        */
       /**
        * <br>
        * <img>(双重身份)
        * <input>(双重身份)
        * <hr>：水平线
        * <meta>：元数据
        * <link>：用于链接外部资源，如 CSS 样式表
       */
</script>
</html>